<route>{meta: {title: 'pdf发票'}}</route>
<template>
  <Page>
    <el-form>
      <el-form-item label="选择文件">
        <el-button @click="selectFiles" type="primary">选择文件</el-button>
        已选择{{data.filePaths.length}}个文件
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="startConvert">确定</el-button>
        <el-button type="primary" @click="download">下载</el-button>
        <el-button type="danger" @click="clear">清空</el-button>
      </el-form-item>
    </el-form>

    <div class="imgs">
      <Scrollbar>
        <div class="img-list">
          <div class="img-wrap" v-for="(item, index) in imgs"
               :key="item.url">
            <el-image
              class="img"
              :src="item.url"
              :preview-src-list="previewList"
              :initial-index="index"
              :preview-teleported="true"
              fit="contain"
            ></el-image>
            <div class="name">{{item.name}}</div>
          </div>
        </div>
      </Scrollbar>
    </div>
  </Page>
</template>

<script>
import Page from '@/components/Page';
import { ipcRenderer } from 'electron';
import file from '@/native/file';
import dialog from '@/util/dialog';
import db from '@/util/db';
import Scrollbar from '@/components/Scrollbar';

/**
 Author: 蒋鑫强
 Time: 2023/6/6
 Description:
 */
export default {
  name: "pdfFapiao",
  components: {Scrollbar, Page},
  data() {
    return {
      data: {
        filePaths: []
      },

      loading: false,

      imgs: []
    }
  },

  computed: {
    previewList() {
      return this.imgs.map(d => d.url);
    }
  },

  methods: {
    selectFiles() {
      ipcRenderer.send('open-file-dialog', {
        filters:[{ name: 'Pdf', extensions: ['pdf'] }],
        properties: ['openFile', 'multiSelections']
      });
      ipcRenderer.on('get-file-dialog', (event, path) => {
        this.data.filePaths = path;
      });
    },

    async startConvert() {
      if (this.data.filePaths.length <= 0) {
        return dialog.alert('没有选择文件!')
      }
      this.loading = true;
      for (const filePath of this.data.filePaths) {
        const path = await file.pdfToImg(filePath, 1800);
        const result = await file.imgDraw('src/assets/img/fapiao-bg.png', path, {
          x: 320,
          y: 145,
          width: 1800
        });

        await db.setItem('fapiao', result);

        await this.loadData();
      }
      this.loading = false;
    },

    async loadData() {
      this.imgs = await db.getItem('fapiao') || [];
    },

    download() {
      file.downloadFile(this.imgs);
    },

    clear() {
      dialog.confirm('确定要清空?').then(async () => {
        await db.removeItem('fapiao');
        for (const img of this.imgs) {
          await file.remove(img.url);
        }
        await this.loadData();
        dialog.success('操作成功');
      });
    }
  },

  created() {
    this.loadData();
  }
}
</script>

<style lang="less" scoped>
.imgs {
  flex: 1;
  overflow: hidden;
  border: 1px solid #f1f1f1;

  .img-list {
    padding: 10px 0 0 10px;
    display: flex;
    flex-wrap: wrap;

    .img-wrap {
      width: 120px;
      border: 1px solid #f1f1f1;
      margin-right: 10px;
      margin-bottom: 10px;

      .img {
        display: block;
        border-bottom: 1px solid #f1f1f1;
      }

      .name {
        font-size: 12px;
        text-align: center;
        padding: 5px 10px;
        word-break: break-all;
      }
    }
  }
}
</style>
